import React, { useEffect, useState } from 'react'
import Navbar from '@/comopnents/Navbar'
import OrderCard from '@/comopnents/OrderCard'
import { getPreOrderById } from '@/utils/my/order'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { Form, Input } from 'antd-mobile'
import styles from './index.module.less'


interface orderData {
    order: {
        id: string
    }
    items: [{
        id: string
        productSn: string
    }]
}

export default function ConfirmOrder() {

    const navigate = useNavigate()

    // 获取 地址栏中的 id
    const [searchParams] = useSearchParams()
    const orderId = searchParams.get('id') as string

    // 获取本地存储中的地址数据
    const address = JSON.parse(localStorage.getItem('adress') as string)

    const getPreOrder = async (orderId: string) => {
        let res: resType = await getPreOrderById(orderId)
        let obj = {} as orderData
        if (res.code === 20000) {
            obj.items = res.data.orderItems
            obj.order = res.data.orderBase
            obj.items.forEach(item => item.id = item.productSn)
            setOrderData([obj])
        }
    }

    // 传入到 订单卡片 中的数据
    const [orderData, setOrderData] = useState([] as any)

    // 进入到地址列表页面
    const gotoAddress = () => {
        navigate(`/my/adresspage?type=select`)
    }

    useEffect(() => {
        getPreOrder(orderId)
    }, [])
    return (
        <div>
            <Navbar title='乐居'></Navbar>

            {/* 用户地址信息 */}
            <div className={styles.userInfoBox} onClick={gotoAddress}>
                <div className={styles.title}>等待支付</div>

                {
                    address ?
                        <div className={styles.infoList}>
                            <div>姓名：{address.name}</div>
                            <div>电话：{address.phoneNumber}</div>
                            <div>收货地址：{address.province}-{address.city}-{address.region}-{address.detailAddress}</div>
                        </div> :
                        <div className={styles.selectAddress}>
                            请选择收货地址
                        </div>
                }
            </div>


            {/* 订单卡片 */}
            {
                JSON.stringify(orderData) !== '{}' && 
                <OrderCard orderData={orderData} type='6'></OrderCard>
            }
        </div>
    )
}
